<template>
    <div class="pages">
        <nav-top class="nav-top" :page="page" ref="navTop" style="position: absolute;top: 0; left: 0;right: 0;"></nav-top>
        <mv-full-page v-if="isInit" ref="myFullPage" :pages="pages" v-model:page="page" :config="config"
            @rollEnd="onRollEnd" @pointerMouseover="pointerMouseover" @loaded="onLoaded">
            <template #page1>
                <div class="group_1" ref="group_1"
                    :style="{ 'background-image': 'url(' + OSS_URL + (isWebp ? 'home.webp' : 'home.gif') + ')' }">
                    <button class="explore" @mouseenter.stop="over" @mousemove.stop="move"
                        @click="$router.push('/application')">
                        <span class="explore-text">Explore</span>
                        <el-image class="icon-explore" :src="require('@/assets/img/arrowhead.png')"></el-image>
                        <div class="side"></div>
                    </button>
                </div>
            </template>
            <template #page2>
                <div class="group_2">
                    <div class="group-text2">
                        <div class="group-header">
                            <span :class="home.page2 ? 'group-title group-title-active' : 'group-title'"
                                :data-font="$i18n.locale">{{
                                    $t("home.group_2.title")
                                }}</span>
                            <el-image
                                :class="home.page2 ? 'icon-innovationCompetition-active' : 'icon-innovationCompetition'"
                                :src="require('@/assets/img/icon-InnovationCompetition.png')"></el-image>
                        </div>
                        <div :class="home.page2 ? 'line1 line1-active' : 'line1'"></div>
                        <div class="group2-text">
                            <div class="content">
                                <p :data-font="$i18n.locale" :class="home.page2 ? 'p1 p1-active' : 'p1'">{{
                                    $t("home.group_2.p1")
                                }}</p>
                                <p :class="home.page2 ? 'p2 p2-active' : 'p2'"><b>{{ $t("home.group_2.p2") }}</b>{{
                                    $t("home.group_2.p3")
                                }}</p>
                            </div>
                        </div>
                    </div>
                    <!-- 公式/背景图 -->
                    <div :class="home.page2 ? 'translation1 translation1-active' : 'translation1'"
                        :style="{ 'background-image': 'url(' + OSS_URL + (isWebp ? '%E7%8E%BB%E7%92%83%E7%90%83.webp' : '%E7%8E%BB%E7%92%83%E7%90%83.gif') + ')' }">
                    </div>
                    <div :class="home.page2 ? 'line2 line2-active' : 'line2'"></div>
                    <div :class="home.page2 ? 'gs1 gs1-active' : 'gs1'"></div>
                    <div :class="home.page2 ? 'gs2 gs2-active' : 'gs2'"></div>
                    <div class="bg1"></div>
                    <div :class="home.page2 ? 'bg-box box1 box1-active' : 'bg-box box1'"></div>
                </div>
            </template>
            <template #page3>
                <div class="group_3">
                    <!-- 公式/背景 -->
                    <div :class="home.page3 ? 'gs3 gs3-active' : 'gs3'"></div>
                    <div :class="home.page3 ? 'gs4 gs4-active' : 'gs4'" :data-font="$i18n.locale"></div>
                    <div class="bg2"></div>
                    <div class="bg3"></div>
                    <div :class="home.page3 ? 'balls1_1 balls1_1-active' : 'balls1_1'"></div>
                    <div :class="home.page3 ? 'balls1_2 balls1_2-active' : 'balls1_2'"></div>
                    <div :class="home.page3 ? 'balls1_3 balls1_3-active' : 'balls1_3'"></div>
                    <div :class="home.page3 ? 'translation5 translation5-active' : 'translation5'"
                        :style="{ 'background-image': 'url(' + OSS_URL + (isWebp ? '%E5%A4%A7%E8%9B%8B%E7%99%BD.webp' : '%E5%A4%A7%E8%9B%8B%E7%99%BD.gif') + ')' }">
                    </div>
                    <div :class="home.page3 ? 'translation7 translation7-active' : 'translation7'"
                        :style="{ 'background-image': 'url(' + OSS_URL + (isWebp ? '%E5%B0%8F%E8%9B%8B%E7%99%BD.webp' : '%E5%B0%8F%E8%9B%8B%E7%99%BD.gif') + ')' }">
                    </div>
                    <div :class="home.page3 ? 'bg-box box2 box1-active' : 'bg-box box2'"></div>
                    <div :class="home.page3 ? 'bg-box box3 box1-active' : 'bg-box box3'"></div>

                    <div class="group_3_header">
                        <span :class="home.page3 ? 'group-title group-title-active' : 'group-title'"
                            :data-font="$i18n.locale">{{
                                $t('home.group_3.title')
                            }}</span>
                        <div class="icon-group">
                            <el-image :class="home.page3 ? 'syntheticBiology syntheticBiology-active' : 'syntheticBiology'"
                                :src="require('@/assets/img/assetssyntheticBiology.png')">
                            </el-image>
                            <div class="group_3_line">
                                <div :class="home.page3 ? 'line1 line1-active' : 'line1'"></div>
                            </div>
                        </div>
                    </div>

                    <div :class="home.page3 ? 'group_3_text group_3_text-active' : 'group_3_text '">
                        <div class="left">
                            <p :data-font="$i18n.locale">{{ $t('home.group_3.p1') }}<b :data-font="$i18n.locale">{{
                                $t('home.group_3.p2')
                            }}</b></p>
                        </div>
                        <div class="right">
                            <p :data-font="$i18n.locale">{{ $t('home.group_3.p3') }}</p>
                        </div>
                    </div>
                </div>
            </template>
            <template #page4>
                <div class="group_5">
                    <div :class="home.page4 ? 'balls2_1 balls2_1-active' : 'balls2_1'"></div>
                    <div :class="home.page4 ? 'balls2_2 balls2_2-active' : 'balls2_2'"></div>
                    <div class="title">
                        <div :class="home.page4 ? 'group-title group-title-active' : 'group-title'"
                            :data-font="$i18n.locale">{{
                                $t('home.group_5.title')
                            }}</div><b :data-font="$i18n.locale" class="title-time">{{ $t('home.group_5.p1') }}</b>

                    </div>
                    <div :class="home.page4 ? 'line4 line4-active' : 'line4'"></div>
                    <!-- 动图DNA -->
                    <div class="dna">
                        <div class="list1">
                            <div class="list1-title">
                                <div><b :data-font="$i18n.locale">{{ $t('home.group_5.p2') }}</b></div>
                            </div>
                            <div class="list-demo" v-for="item, index in list1" :key="index" :data-font="$i18n.locale">
                                <div :class="home.page4 ? 'time time-active' : 'time'" :data-font="$i18n.locale">{{
                                    item.time
                                }}</div>
                                <div :class="home.page4 ? 'dna-title dna-title-active' : 'dna-title'"
                                    :data-font="$i18n.locale">{{
                                        item.title
                                    }}
                                </div>
                                <div :class="home.page4 ? 'dna-line dna-line-active' : 'line'"></div>
                                <div :class="home.page4 ? 'round round-active' : 'round'"></div>
                            </div>
                        </div>
                        <div class="list2">
                            <div class="list2-title">
                                <div :data-font="$i18n.locale">
                                    <b>{{ $t('home.group_5.p3') }}</b>
                                    <b>{{ $t('home.group_5.p4') }}</b>
                                </div>
                            </div>
                            <div class="list-demo" v-for="item, index in list2" :key="index" :data-font="$i18n.locale">
                                <div :class="home.page4 ? 'dna-title dna-title-active' : 'dna-title'"
                                    :data-font="$i18n.locale">{{
                                        item.title
                                    }}
                                </div>
                                <div :class="home.page4 ? 'time time-active' : 'time'" :data-font="$i18n.locale">{{
                                    item.time
                                }}</div>
                                <div :class="home.page4 ? 'dna-line dna-line-active' : 'line'">
                                </div>
                                <div :class="home.page4 ? 'round round-active' : 'round'"></div>
                            </div>
                        </div>
                        <img :class="home.page4 ? 'translation-dna translation-dna-active' : 'translation-dna'"
                            :src="OSS_URL + (isWebp ? 'dna.webp' : 'dna.gif')" alt="DNA">
                    </div>

                    <div :class="home.page4 ? 'tabs tabs-active' : 'tabs'">
                        <button class="btn btn1" @mouseenter.stop="over" @mousemove.stop="move"
                            @click="$router.push('/competitionJudges')">
                            <div class="icon-pw" :data-font="$i18n.locale"></div>
                            <span class="tab-title" :data-font="$i18n.locale">{{ $t('home.group_5.pw') }}</span>
                            <div class="side"></div>
                        </button>
                        <button class="btn btn2" @mouseenter.stop="over" @mousemove.stop="move"
                            @click="$router.push('/application')">
                            <div class="icon-sz" :data-font="$i18n.locale"></div>
                            <span class="tab-title" :data-font="$i18n.locale">{{ $t('home.group_5.sz') }}</span>
                            <div class="side"></div>
                        </button>
                    </div>
                </div>

            </template>
            <template #page5>
                <div class="wrap" ref="wraps" @scroll="countSroll">
                    <div class="group_6" ref="wrap" :data-font="$i18n.locale">
                        <div :class="home.page5 ? 'translation3 translation3-active' : 'translation3'"
                            :style="{ 'background-image': 'url(' + OSS_URL + (isWebp ? '%E4%B9%99%E9%85%B8.webp' : '%E4%B9%99%E9%85%B8.gif') + ')' }">
                        </div>
                        <div :class="home.page5 ? 'gs5 gs5-active' : 'gs5'"></div>
                        <div :class="home.page5 ? 'balls3 balls3-active' : 'balls3'"></div>
                        <div :class="home.page5 ? 'balls4 balls4-active' : 'balls4'"></div>
                        <div :class="home.page5 ? 'balls5 balls5-active' : 'balls5'"></div>
                        <div class="bg4"></div>
                        <div class="bg5"></div>
                        <div class="bg6"></div>
                        <div :class="home.page5 ? 'translation2 translation2-active' : 'translation2'" :style="{
                            '--translationImage': 'url(' + OSS_URL + (isWebp ? '%E7%B4%AB%E6%9D%89%E9%86%87.webp'
                                : '%E7%B4%AB%E6%9D%89%E9%86%87.gif') + ')'
                        }">
                        </div>

                        <div :class="home.page5 ? 'translation4 translation4-active' : 'translation4'"
                            :style="{ 'background-image': 'url(' + OSS_URL + (isWebp ? '%E9%9D%92%E8%92%BF%E7%B4%A0.webp' : '%E9%9D%92%E8%92%BF%E7%B4%A0.gif') + ')' }">
                        </div>
                        <div :class="home.page5 ? 'translation6 translation6-active' : 'tranlation6'"
                            :style="{ 'background-image': 'url(' + OSS_URL + (isWebp ? '%E5%B0%8F%E8%9B%8B%E7%99%BD.webp' : '%E5%B0%8F%E8%9B%8B%E7%99%BD.gif') + ')' }">
                        </div>

                        <div :class="home.page5 ? 'tab-content1 tab-content1-active' : 'tab-content1'">
                            <div class="title" :data-font="$i18n.locale">{{ $t('home.group_6.zd') }}</div>
                            <div class="logo-demo">
                                <el-image :src="require('@/assets/img/logo1.png')"></el-image>
                            </div>
                            <div class="title" :data-font="$i18n.locale">{{ $t('home.group_6.zb') }}</div>
                            <div class="logo-demo">
                                <el-image :src="require('@/assets/img/logo1.png')"></el-image>
                            </div>
                            <div class="title" :data-font="$i18n.locale">{{ $t('home.group_6.cb') }}</div>
                            <div class="logo-demo">
                                <el-image :src="require('@/assets/img/logo2.png')"></el-image>
                            </div>
                            <div class="logo-demo">
                                <el-image :src="require('@/assets/img/logo3.png')"></el-image>
                            </div>
                            <div class="logo-demo">
                                <el-image :src="require('@/assets/img/logo4.png')"></el-image>
                            </div>
                            <div class="logo-demo">
                                <el-image :src="require('@/assets/img/logo5.png')"></el-image>
                            </div>



                            <div class="co-sponsors">
                                <div class="co-sponsors-title" :data-font="$i18n.locale">{{ $t("home.group_6.lh") }}
                                </div>
                                <div v-if="$i18n.locale === 'zh'" class="co-sponsors-content" :data-font="$i18n.locale">
                                    <div class="left">
                                        <p>
                                            深圳理工大学（筹）合成生物学院<br>
                                            中国科学院深圳先进技术研究院合成生物学研究所<br>
                                            深圳合成生物学创新研究院<br>
                                            中国科学院合成生物学重点实验室<br>
                                            深圳市合成生物学协会<br>
                                            亚洲合成生物学协会（ASBA）<br>
                                            北京大学定量生物学中心<br>
                                            国家合成生物技术创新中心<br>
                                            华南理工大学生物科学与工程学院<br>
                                            华大生命科学研究院<br>
                                            华中科技大学生命伦理学研究中心<br>
                                            中山大学生命科学学院<br>
                                            南京师范大学食品与制药工程学院<br>
                                            厦门大学生命科学学院
                                        </p>
                                    </div>
                                    <div class="right">
                                        <p>
                                            香港大学生物医学学院<br>
                                            "一带一路"国际科学组织联盟（ANSO）<br>
                                            华东理工大学生物反应器工程国家重点实验室<br>
                                            浙江大学杭州国际科创中心生物与分子制造研究院<br>
                                            湖北大学省部共建生物催化与酶工程国家重点实验室<br>
                                            浙江大学药学院<br>
                                            中国科学技术大学生命科学与医学部<br>
                                            教育部“珠峰计划”合成生物学前沿科学中心<br>
                                            清华大学合成与系统生物学中心<br>
                                            山东大学为生物技术国家重点实验室<br>
                                            上海交通大学生命科学技术学院<br>
                                            深圳市第二人民医院<br>
                                            武汉大学药学院<br>
                                            西北工业大学生态环境学院<br>
                                        </p>
                                    </div>
                                </div>
                                <div v-if="$i18n.locale === 'en'" class="co-sponsors-content" :data-font="$i18n.locale">
                                    <div class="en-box">
                                        <p class="en-info">
                                            Faculty of Synthetic Biology, University of SIAT<br>
                                            Institute of Synthetic Biology, Shenzhen Institute of Advanced
                                            Technology<br>
                                            Shenzhen Institute of Synthetic Biology<br>
                                            Key Laboratory of Synthetic Biology, Chinese Academy of Sciences<br>
                                            Shenzhen Synthetic Biology Association<br>
                                            Asian Synthetic Biology Association<br>
                                            Peking University Center for Quantitative Biology<br>
                                            National Technology Innovation Center of Synthetic Biology<br>
                                            College of Biological Sciences, Xiamen University<br>
                                            School of Biomedical Sciences, the University of Hong Kong<br>
                                            Alliance of International Science Organizations in the Belt and Road Region
                                            (ANSO)<br>
                                            State Key Laboratory of Bioreactor Engineering, East China University of
                                            Science
                                            and Technology<br>
                                            Hangzhou Global Scientific and Technological Innovation Center, Zhejiang
                                            University<br>
                                            State Key Laboratory of Biocatalysis and Enzyme Engineering, Hubei
                                            University<br>
                                            School of Pharmacy, Zhejiang University<br>
                                            Department of Life Sciences and Medicine, University of Science and
                                            Technology
                                            of China<br>
                                            Center of Synthetic Biology Frontiers, Zhufeng Project at Ministry of
                                            Education
                                            of China<br>
                                            College of Biological Science and Engineering, South China University of
                                            Technology<br>
                                            Beijing Institute of Genomics Group<br>
                                            Center for Bioethics, Huazhong University of Science and Technology<br>
                                            College of Biological Sciences, Sun Yat-sen University<br>
                                            College of Food and Drug Engineering, Nanjing Normal University<br>
                                            Center for Synthetic and Systems Biology, Tsinghua University<br>
                                            State Key laboratory of Microbial Biotechnology, Shandong University<br>
                                            School of Life Sciences and Biotechnology, Shanghai Jiaotong University<br>
                                            The Second People’s Hospital of Shenzhen<br>
                                            School of Pharmaceutical Sciences, Wuhan University<br>
                                            School of Ecology and Environment,Northwestern Polytechnical University<br>
                                        </p>
                                    </div>
                                </div>
                                <div>

                                </div>
                            </div>
                            <div class="line">
                                <div :class="home.page5 ? 'line1 line1-active' : 'line1'"></div>
                            </div>
                            <div :class="home.page5 ? 'balls6 balls6-active' : 'balls6'"></div>
                        </div>
                    </div>
                    <v-footer ref="footer"></v-footer>
                </div>
            </template>
        </mv-full-page>
        <!-- <div class="loading">
                <div>
                    <span class="loading-text">Loading......</span>
                    <el-image src=""></el-image>
                </div>
            </div> -->
        <!-- 已废弃 -->
        <div class="group_4">

            <el-image class="js1" :src="require('@/assets/img/js1.png')"></el-image>

            <div class="group_4_content">
                <div class="title">
                    <span class="group-title" :data-font="$i18n.locale">{{ $t('home.group_4.title') }}</span>
                </div>
                <el-image :src="require('@/assets/img/line3.png')"></el-image>
                <div class="group_4_text">
                    <div class="text">
                        <p>{{ $t('home.group_4.p1') }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="back" :style="{ 'opacity': page === 1 ? '0' : '1' }" ref="back" @click="toPage"></div>
    </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs, onUnmounted, watchEffect } from "vue"
import navTop from "@/components/common/nav-top"
import vFooter from "@/components/common/v-footer/index.vue"
import { OSS_URL } from "@/utils/URL"
export default {
    name: "home",
    components: {
        navTop,
        vFooter
    },
    setup() {
        const state = reactive({
            dynamicSlotName: "page",
            pages: 5,
            tempPage: 1,
            page: 1,
            config: {
                disabled: false,
                direction: "v",
                position: "absolute",
                width: "100%",
                height: "100%",
                cache: true,
                //  循环播放
                loop: false,
                // 自动轮播
                autoPlay: {
                    play: false,
                    // 切换间隔
                    interval: 1000,
                },
                transition: {
                    duration: "1000ms", // 动画时长
                    timingFun: "ease", // 动画速度曲线
                },
                poi: {
                    className: "my-poi",
                    pointer: false
                },
                bgArr: [],
                arrow: {
                    // 上一页箭头
                    last: false,
                    // 下一页箭头
                    next: false,
                },
            },
            home: {
                page2: false,
                page3: false,
                page4: false,
                page5: false
            },
            OSS_URL: OSS_URL,
            isInit: false
        })
        const myFullPage = ref()
        const wraps = ref(null)
        const pointerMouseover = (event, index) => {
            console.log(event, index)
        }
        const onRollEnd = (page) => {
            if (page == 2) {
                state.home.page2 = true
            } else if (page == 3) {
                state.home.page3 = true
            } else if (page == 4) {
                state.home.page4 = true
            } else if (page == 5) {
                state.home.page5 = true
            }
        }

        const toPage = () => {
            if (state.page === 5) {
                wraps.value.scrollTop = 0
            }
            state.page = state.tempPage;
            (myFullPage.value).goPage(state.page, false)
            state.config.disabled = false
        }
        const switchDire = () => {
            state.config.direction == "v"
                ? (state.config.direction = "h")
                : (state.config.direction = "v")
        }
        const pageLoaded = () => {
            console.log("加载完毕")
        }
        const onLoaded = () => {
            // 所有资源已经加载完毕
            console.log("图片资源加载完毕")

        }
        let timer = null
        onMounted(() => {
            timer = setTimeout(() => {
                state.isInit = true
            }, 500)
            if (state.page == 2) {
                state.home.page2 = true
            } else if (state.page == 3) {
                state.home.page3 = true
            } else if (state.page == 4) {
                state.home.page4 = true
            } else if (state.page == 5) {
                state.home.page5 = true
            }
        })
        onUnmounted(() => {
            clearTimeout(timer)
            timer = null
        })

        return {
            ...toRefs(state),
            pointerMouseover,
            onRollEnd,
            toPage,
            switchDire,
            myFullPage,
            onLoaded,
            pageLoaded,
            wraps
        }
    },

    activated() {
        if (this.page > 1) {
            this.$refs.navTop.$el.className = "nav-top nav"
        } else {
            this.$refs.navTop.$el.className = "nav-top nav-active"
        }
    },
    methods: {
        countSroll(e) {
            if (this.$refs.wrap.getBoundingClientRect().top >= e.target.style.marginTop) {
                this.config.disabled = false
            } else {
                this.config.disabled = true
            }
            let backTop = -(this.$refs.wrap.getBoundingClientRect().top + this.$refs.footer.$el.offsetTop - window.innerHeight)
            if (backTop >= this.$refs.footer.$el.clientHeight) {
                backTop = this.$refs.footer.$el.clientHeight
            }
            if (backTop >= 0) {
                this.$refs.back.style.bottom = (backTop / document.documentElement.style.fontSize.split('px')[0]) + 1.0666 + 'rem'
            } else {
                this.$refs.back.style.bottom = 1.0666 + 'rem'
            }
        },
        move(e) {
            e.target.lastChild.style.top = e.offsetY + 'px'
            e.target.lastChild.style.left = e.offsetX + 'px'

        },
        over(e) {
            e.target.lastChild.style.top = e.offsetY + 'px'
            e.target.lastChild.style.left = e.offsetX + 'px'
        },
    },
    watch: {
        page(newVal, oldVal) {
            if (newVal > 1) {
                this.$refs.navTop.$el.className = "nav-top nav"
            } else {
                this.$refs.navTop.$el.className = "nav-top nav-active"
            }
        }
    },

    computed: {
        isWebp() {
            return this.$store.state.webp
        },
        list1() {
            let list = []
            if (this.$i18n.locale === 'zh') {
                list = [
                    {
                        time: "2024.05.20",
                        title: "报名截止"
                    },
                    {
                        time: "2024.05.21-06.30",
                        title: "初赛（线上评审）"
                    },
                    {
                        time: "2024.7月初",
                        title: "常规赛决赛&嘉年华通知"
                    },
                    {
                        time: "2024.8月初",
                        title: "常规赛决赛&嘉年华"
                    }
                ]
            } else if (this.$i18n.locale === 'en') {
                list = [
                    {
                        time: "05.20.2024",
                        title: "Registration Due"
                    },
                    {
                        time: "05.21-6.30.2024",
                        title: "Project Judging(online)"
                    },
                    {
                        time: "Before 07.10.2024",
                        title: "Carnival Registration"
                    },
                    {
                        time: "08.2024",
                        title: "Regular Final & Carnival"
                    }
                ]
            }
            return list
        },
        list2() {
            let list = []
            if (this.$i18n.locale === 'zh') {
                list = [
                    {
                        time: "2024.04.20",
                        title: "报名截止"
                    },
                    {
                        time: "2024.05.30",
                        title: "项目材料反馈截止"
                    },
                    {
                        time: "2024.7月初",
                        title: "嘉年华通知"
                    },
                    {
                        time: "2024.8月初",
                        title: "常规赛决赛&嘉年华"
                    }
                ]
            } else if (this.$i18n.locale === 'en') {
                list = [
                    {
                        time: "04.20.2024",
                        title: "Registration Due"
                    },
                    {
                        time: "05.30.2024",
                        title: "Project Submission Due"
                    },
                    {
                        time: "Before 07.10.2024",
                        title: "Carnival Registration"
                    },
                    {
                        time: "08.2024",
                        title: "Regular Final & Carnival"
                    },
                ]
            }
            return list
        }
    }
}
</script>

<style lang="less" scoped>
.nav-top {
    z-index: 999;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.back {
    z-index: 99;
    position: absolute;
    right: 1.28rem;
    bottom: 1.0666rem;
    width: 1.33rem;
    height: 1.33rem;
    background: url('@/assets/img/backTop.png') no-repeat;
    background-size: 100% 100%;
    transition: opacity 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);
}

.loading {
    width: 51.2rem;
    height: 28.8rem;
    min-height: 100vh;
    max-height: 100vh;
    background: #FFFFFF;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
}

p[data-font='en'] {
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* 这个的使用在web-kit中有些危险，他可能会阶段所有东西 */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
}

.pages :deep(.mv-page-container) {
    background-color: rgba(240, 240, 240, 1);
}

.pages {
    margin: 0 auto;
    width: 51.2rem;
    height: 28.8rem;
    min-height: 100vh;
    max-height: 100vh;
    position: relative;
    background-color: rgba(240, 240, 240, 1);
    overflow: hidden;

    .group_1 {
        background-repeat: no-repeat;
        background-size: cover;
        width: 51.2rem;
        height: 28.8rem;
        min-height: 100vh;
        max-height: 100vh;
        position: relative;

        .el-image {
            width: 100%;
            height: 100%;
        }

        .explore {
            z-index: 5;
            position: absolute;
            left: 20.75rem;
            bottom: 2.13rem;
            overflow: hidden;
            width: 9.68rem;
            height: 2.67rem;
            background: linear-gradient(315deg, rgba(58, 100, 243, 0.1) 0%, rgba(161, 61, 238, 0.1) 100%);
            border-radius: 0.32rem;
            border: 0.05rem solid rgba(255, 255, 255, 1);
            backdrop-filter: blur(10px);
            transition: transform 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);
            display: flex;
            align-items: center;
            justify-content: center;

            .explore-text {
                pointer-events: none;
                z-index: 8;
                display: inline-block;
                height: 1.07rem;
                font-size: 1.07rem;
                font-family: 'RNSSanzSC-Light, RNSSanzSC';
                font-weight: 300;
                color: rgb(255, 255, 255);
                line-height: 1.07rem;
                letter-spacing: 0.05rem;
                margin-right: 0.5rem;
            }

            .icon-explore {
                pointer-events: none;
                z-index: 8;
                width: 1.6rem;
                height: 1.6rem;

            }

            .side {
                pointer-events: none;
                z-index: 1;
                position: absolute;
                width: 2.13rem;
                height: 2.13rem;
                border-radius: 50%;
                background-color: #9000ff;
                transform: translate(-50%, -50%);
                left: 0;
                top: 0;
                filter: blur(20px);
                opacity: 0;
                transition: opacity 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);
            }



        }

        .explore:hover .side {
            opacity: 0.5;
            transition: opacity 0.3s cubic-bezier(0.42, 0.00, 0.58, 1.00);
        }

        .explore:active {
            transform: scale(90%);
            border: none;
            background: linear-gradient(315deg, rgba(58, 100, 243, 0.75) 0%, rgba(161, 61, 238, 0.75) 100%);

            .explore-text {
                transition: color 0.3s cubic-bezier(0.42, 0.00, 0.58, 1.00);
                color: rgb(255, 255, 255, 0.5);
            }

            .side {
                opacity: 0;
            }
        }


    }

    .group_2 {
        width: 51.2rem;
        min-height: 100vh;
        height: 24rem;
        position: relative;

        .group-text2 {
            position: absolute;
            top: 4.27rem;
            left: 9.6rem;
            width: 20.83rem;
            z-index: 5;

            .group-header {
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                margin-bottom: 0.53rem;

                .icon-innovationCompetition {
                    width: 3.2rem;
                    height: 3.2rem;
                    transform: translateX(10.106rem);
                    opacity: 0;
                }

                .icon-innovationCompetition-active {
                    transition-property: transform, opacity;
                    transition-duration: 0.86s, 0.86s;
                    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                    transition-delay: 0s, 0.06s;
                    transform: translateX(0);
                    opacity: 1;
                }
            }

            .group2-text {
                width: 20.83rem;
                height: 12.48rem;
                margin-top: 1.44rem;

                .content {
                    width: 100%;
                    height: 100%;
                }

                .p1 {
                    width: 18.32rem;
                    color: #68656C;
                    transform: translateX(-9.6rem);
                    opacity: 0;
                }

                .p1[data-font='zh'] {
                    font-weight: normal;
                    font-size: 0.53rem;
                    font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
                    word-break: break-all;
                    letter-spacing: 0.05rem;
                    line-height: 0.85rem;
                }

                .p1[data-font='en'] {
                    font-size: 0.48rem;
                    font-family: 'Helvetica';
                    line-height: 0.75rem;
                }

                .p1-active {
                    transition-property: transform, opacity;
                    transition-duration: 0.86s, 0.86s;
                    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                    transition-delay: 0.07s, 0.07s;
                    transform: translateX(0);
                    opacity: 1;
                }

                .p2 {
                    width: 16.08rem;
                    height: 5.97rem;
                    font-size: 0.53rem;
                    font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
                    font-weight: normal;
                    color: #68656C;
                    line-height: 0.85rem;
                    letter-spacing: 0.05rem;
                    margin-top: 1.07rem;
                    word-break: break-all;
                    transform: translateX(-9.6rem);
                    opacity: 0;

                    b {
                        font-family: 'IdeaFonts-DianHei-FEJ', 'IdeaFonts-DianHei';
                    }
                }

                .p2-active {
                    transition-property: transform, opacity;
                    transition-duration: 0.86s, 0.86s;
                    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                    transition-delay: 0.14s, 0.14s;
                    transform: translateX(0);
                    opacity: 1;
                }
            }
        }

        .translation1 {
            width: 23.28rem;
            height: 25.41rem;
            position: absolute;
            left: 27.92rem;
            top: 5.23rem;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: left;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.17s, 0.17s;
            transform: translateX(100%);
            opacity: 0;
        }

        .translation1-active {
            transform: translateX(0);
            opacity: 1;
        }

        .bg1 {
            width: 6.45rem;
            height: 11.55rem;
            position: absolute;
            top: 13.71rem;
            left: 0;
            background: url('@/assets/img/bg1.png') no-repeat;
            background-size: 100% 100%;
        }

        .gs1 {
            width: 8.39rem;
            height: 2.35rem;
            position: absolute;
            top: 15.17rem;
            left: 0;
            background: url('@/assets/img/gs1.png') no-repeat;
            background-size: 100% 100%;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.32s, 0.32s;
            transform: translateX(-100%);
            opacity: 0;
        }

        .gs1-active {
            transform: translateX(0);
            opacity: 1;
        }

        .gs2 {
            width: 4.93rem;
            height: 1.12rem;
            position: absolute;
            left: 1.44rem;
            top: 17.49rem;
            background: url('@/assets/img/gs2.png') no-repeat;
            background-size: 100% 100%;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.29s, 0.29s;
            transform: translateX(-100%);
            opacity: 0;
        }

        .gs2-active {
            transform: translateX(0);
            opacity: 1;
        }

        .line2 {
            width: 12rem;
            height: 0.85rem;
            position: absolute;
            top: 22rem;
            left: -0.35rem;
            background: url('@/assets/img/line2.png') no-repeat;
            background-size: 100% 100%;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.39s, 0.45s;
            transform: translateX(-100%);
            opacity: 0;
        }

        .line2-active {
            transform: translateX(0);
            opacity: 1;
        }
    }


    .group_3 {
        width: 51.2rem;
        height: 24rem;
        min-height: 100vh;
        position: relative;

        .gs3 {
            width: 3.68rem;
            height: 0.77rem;
            position: absolute;
            right: 0.51rem;
            top: 7.26rem;
            background: url('@/assets/img/gs3.png') no-repeat;
            background-size: 100% 100%;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.39s, 0.45s;
            transform: translateY(4.32rem);
            opacity: 0;
        }

        .gs3-active {
            transform: translateY(0);
            opacity: 1;
        }

        .gs4 {
            background: url('@/assets/img/gs4.png') no-repeat;
            background-size: cover;
            position: absolute;
            top: 21.12rem;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.15s, 0.15s;
            transform: translateY(4.32rem);
            opacity: 0;
        }

        .gs4[data-font='zh'] {
            width: 9.49rem;
            height: 1.68rem;
            right: 1.01rem;
        }

        .gs4[data-font='en'] {
            width: 8.61rem;
            height: 1.52rem;
            right: 0.48rem;
        }

        .gs4-active {
            transform: translateY(0);
            opacity: 1;
        }

        .bg2 {
            width: 7.41rem;
            height: 13.95rem;
            position: absolute;
            right: 0;
            top: -2.1rem;
            background: url('@/assets/img/bg2.png') no-repeat;
            background-size: 100% 100%;
        }


        .bg3 {
            width: 8.35rem;
            height: 10.37rem;
            position: absolute;
            right: 0;
            top: 4rem;
            background: url('@/assets/img/bg3.png') no-repeat;
            background-size: 100% 100%;
        }

        .balls1_1 {
            width: 1.44rem;
            height: 1.39rem;
            background: url('@/assets/img/balls1_1.png') no-repeat;
            background-size: cover;
            position: absolute;
            right: 5.04rem;
            top: 10.88rem;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.35s, 0.35s;
            transform: translateY(1.68rem);
            opacity: 0;
        }

        .balls1_1-active {
            transform: translateY(0);
            opacity: 1;
        }

        .balls1_2 {
            width: 0.85rem;
            height: 0.83rem;
            background: url('@/assets/img/balls1_2.png') no-repeat;
            background-size: cover;
            position: absolute;
            right: 6.8rem;
            top: 20rem;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.35s, 0.35s;
            transform: translateY(1.68rem);
            opacity: 0;
        }

        .balls1_2-active {
            transform: translateY(0);
            opacity: 1;
        }

        .balls1_3 {
            width: 0.48rem;
            height: 0.48rem;
            background: url('@/assets/img/balls1_3.png') no-repeat;
            background-size: cover;
            position: absolute;
            right: 6rem;
            top: 19.55rem;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.35s, 0.35s;
            transform: translateY(2.4rem);
            opacity: 0;
        }

        .balls1_3-active {
            transform: translateY(0);
            opacity: 1;
        }

        .translation5 {
            background-repeat: no-repeat;
            background-size: cover;
            background-position: right;
            width: 18.25rem;
            height: 15.28rem;
            position: absolute;
            top: 10.86rem;
            left: 0.88rem;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.35s, 0.35s;
            transform: translateX(-7.89rem);
            opacity: 0;
        }

        .translation5-active {
            transform: translateX(0);
            opacity: 1;
        }

        .translation7 {
            background-repeat: no-repeat;
            background-size: cover;
            background-position: right;
            width: 3.72rem;
            height: 3.12rem;
            position: absolute;
            top: 8.19rem;
            left: 3.97rem;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.35s, 0.35s;
            transform: translateX(-6.51rem);
            opacity: 0;
        }

        .translation7-active {
            transform: translateX(0);
            opacity: 1;
        }

        .group_3_header {
            position: absolute;
            left: 9.6rem;
            top: 4.27rem;

            .icon-group {
                margin-top: 0.05rem;
                display: flex;
                align-items: center;

                .syntheticBiology {
                    width: 3.2rem;
                    height: 3.2rem;
                    margin-right: 1.49rem;
                    transition-property: transform, opacity;
                    transition-duration: 0.86s, 0.86s;
                    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                    transition-delay: 0.35s, 0.35s;
                    transform: translateX(-8.08rem);
                    opacity: 0;
                }

                .syntheticBiology-active {
                    transform: translateX(0);
                    opacity: 1;
                }

                .group_3_line {
                    width: 17.63rem;
                    height: 0.03em;
                }
            }
        }

        .group_3_text {
            position: absolute;
            top: 9.1rem;
            left: 20.75rem;
            display: flex;
            flex-direction: column;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.35s, 0.35s;
            transform: translateX(20.026rem);
            opacity: 0;

            .left {
                width: 20.85rem;

                p {
                    margin-top: 0;
                    margin-bottom: 0;
                    width: 20.85rem;

                    b[data-font='zh'] {
                        font-family: 'IdeaFonts-DianHei-FEJ', 'IdeaFonts-DianHei' !important;
                    }

                    b[data-font='en'] {
                        font-family: 'Helvetica' !important;
                    }

                }

                p[data-font='zh'] {
                    font-size: 0.53rem;
                    font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
                    font-weight: normal;
                    color: #68656C;
                    line-height: 0.85rem;
                    letter-spacing: 0.05rem;
                    word-break: break-all;
                }

                p[data-font='en'] {
                    font-size: 0.48rem;
                    font-family: 'Helvetica';
                    color: #68656C;
                    line-height: 0.75rem;
                }
            }

            .right {
                width: 20.85rem;
                margin-top: 1.07rem;

                p {
                    margin-top: 0;
                    margin-bottom: 0;
                    width: 20.85rem;
                }

                p[data-font='zh'] {
                    font-size: 0.53rem;
                    font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
                    font-weight: normal;
                    color: #68656C;
                    line-height: 0.85rem;
                    letter-spacing: 0.05rem;
                    word-break: break-all;
                }

                p[data-font='en'] {
                    font-size: 0.48rem;
                    font-family: 'Helvetica';
                    color: #68656C;
                    line-height: 0.75rem;
                }
            }
        }

        .group_3_text-active {
            transform: translateX(0);
            opacity: 1;
        }
    }

    .group_4 {
        display: none;
        width: 51.2rem;
        height: 24rem;
        position: relative;

        // 动图/背景


        .js1 {
            width: 3.2rem;
            height: 3.2rem;
            position: absolute;
            bottom: 6.96rem;
            right: 9.49rem;
        }



        .group_4_content {
            width: 20.85rem;
            position: absolute;
            left: 20.75rem;
            top: 0;
            display: flex;
            flex-direction: column;
            justify-content: right;

            .title {
                text-align: right;
                padding-right: 0.53rem;
                margin-bottom: 0.59rem;
            }

            .line3 {
                width: 18.61rem;
                height: 0.83rem;
            }

            .group_4_text {
                width: 20.85rem;
                height: 3.41rem;
                margin-top: 1.68rem;

                .text {
                    width: 100%;
                    height: 100%;

                    p {
                        margin-top: 0 !important;
                        margin-bottom: 0 !important;
                        font-size: 0.53rem;
                        font-family: 'PingFangSC-Regular', 'PingFang SC';
                        font-weight: 400;
                        color: #212121;
                        line-height: 0.85rem;
                    }
                }
            }
        }
    }

    .group_5 {
        width: 51.2rem;
        min-height: 100vh;

        .title {
            margin-top: 3rem;
            margin-left: 8.6rem;
        }

        .title-time {
            font-size: 0.64rem;
            color: #68656C;
            font-weight: normal;

            &[data-font='en'] {
                font-size: 0.48rem;
            }
        }

        .p1 {
            position: absolute;
            top: 4.27rem;
            left: 10.8rem;
        }


        .contest1 {
            position: absolute;
            top: 5.27rem;
            left: 9.6rem;
        }

        .contest2 {
            position: absolute;
            top: 5.27rem;
            left: 9.6rem;
        }

        .tabs {
            width: 100%;
            display: flex;
            justify-content: center;
            transition-property: transform, opacity;
            transition-duration: 0.8s, 0.8s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.55s, 0.55s;
            transform: translateY(2.4rem);
            opacity: 0;
            margin-top: 1.3rem;

            .btn {
                width: 9.68rem;
                height: 1.67rem;
                display: flex;
                align-items: center;
                position: relative;
                outline: none;
                border: 0.08rem solid #7709CC;
                border-radius: 0.32rem;
                margin: 0 1.735rem;
                background: linear-gradient(315deg, rgba(250, 251, 255, 0.25) 100%, rgba(252, 248, 255, 0.25) 100%);
                transition: all 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);
                overflow: hidden;

                .side {
                    pointer-events: none;
                    z-index: 1;
                    position: absolute;
                    width: 2.13rem;
                    height: 2.13rem;
                    border-radius: 50%;
                    background-color: #9000ff;
                    filter: blur(30px);
                    transform: translate(-50%, -50%);
                    opacity: 0;
                    transition: opacity 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);
                }



                .icon-pw {
                    pointer-events: none;
                    position: relative;
                    z-index: 8;
                    width: 0.64rem;
                    height: 0.85rem;
                    background: url('@/assets/img/icon-pw.png') no-repeat;
                    background-size: 100% 100%;
                }

                .icon-sz {
                    pointer-events: none;
                    z-index: 8;
                    width: 0.64rem;
                    height: 0.85rem;
                    background: url('@/assets/img/icon-sz.png') no-repeat;
                    background-size: 100% 100%;
                }

                .icon-pw[data-font='en'] {
                    margin-right: 0.75rem;
                    margin-left: 1.76rem;
                }

                .icon-sz[data-font='en'] {
                    margin-right: 1.01rem;
                    margin-left: 1.76rem;
                }

                .icon-pw[data-font='zh'],
                .icon-sz[data-font='zh'] {
                    margin-right: 0.69rem;
                    margin-left: 1.97rem;
                }


                .tab-title {
                    pointer-events: none;
                    z-index: 8;
                    line-height: 1.07rem;
                    color: #7709CC;
                }

                .tab-title[data-font='zh'] {
                    font-size: 0.96rem;
                    font-weight: normal;
                    font-family: 'IdeaFonts-DianHei-CEJ', 'IdeaFonts-DianHei';
                }

                .tab-title[data-font='en'] {
                    font-size: 1.17rem;
                    font-family: 'RNSSanzSC-Normal, RNSSanzSC';
                    font-weight: 400;
                }


            }

            .btn:hover .side {
                opacity: 0.5;
                transition: opacity 0.3s cubic-bezier(0.42, 0.00, 0.58, 1.00);
            }

            .btn1:active {
                backdrop-filter: blur(30px);
                transform: scale(0.9);
                background-image: linear-gradient(to left, rgba(64, 102, 235, 0.75), rgba(179, 88, 222, 0.75));
                border: none;

                .tab-title {
                    color: #FFFFFF;
                    font-weight: 300;
                }

                .icon-pw {
                    background-image: url('@/assets/img/icon-pw1.png') !important;
                }
            }

            .btn2:active {
                backdrop-filter: blur(10px);
                transform: scale(0.9);
                background-image: linear-gradient(to left, rgba(64, 102, 235, 0.75), rgba(179, 88, 222, 0.75));
                border: none;

                .tab-title {
                    color: #FFFFFF;
                    font-weight: 300;
                }



                .icon-sz {
                    background-image: url('@/assets/img/icon-sz1.png') !important;
                }
            }

            .btn:active {
                .side {
                    opacity: 0;
                }
            }

        }

        .tabs-active {
            transform: translateY(0);
            opacity: 1;
        }

        .balls2_1 {
            width: 0.72rem;
            height: 0.69rem;
            background: url('@/assets/img/balls2_1.png') no-repeat;
            background-size: cover;
            position: absolute;
            top: 3.04rem;
            right: 1.97rem;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.35s, 0.35s;
            transform: translateY(3.92rem);
            opacity: 0;
        }

        .balls2_1-active {
            transform: translateY(0);
            opacity: 1;
        }

        .balls2_2 {
            width: 0.27rem;
            height: 0.24rem;
            background: url('@/assets/img/balls2_2.png') no-repeat;
            background-size: cover;
            position: absolute;
            top: 1.42rem;
            right: 4.56rem;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.35s, 0.35s;
            transform: translateY(3.33rem);
            opacity: 0;
        }

        .balls2_2-active {
            transform: translateY(0);
            opacity: 1;
        }

        .line4 {
            width: 21.5rem;
            height: 0.83rem;
            background: url('@/assets/img/line4.png') no-repeat;
            background-size: 100% 100%;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.35s, 0.35s;
            transform: translateX(-16rem);
            opacity: 0;
        }

        .line4-active {
            transform: translateX(0);
            opacity: 1;
        }

        .dna {
            background-size: cover;
            width: 51.2rem;
            position: relative;

            .translation-dna {
                width: 51.2rem;
                position: absolute;
                top: 0.4rem;
                left: 0;
                right: 0;
                background-size: auto 4.95rem;
                background-repeat: no-repeat;
                transition-property: transform, opacity;
                transition-duration: 0.8s, 0.8s;
                transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                transition-delay: 0.22s, 0.17s;
                transform: translateY(5.493rem);
                opacity: 0;
            }

            .translation-dna-active {
                transform: translateY(0);
                opacity: 1;
            }


            .list1 {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 1rem;

                .list1-title {
                    display: flex;
                    flex-direction: column;
                    height: 3.2rem;
                    color: #023BFE;
                    font-size: 0.64rem;
                    width: 4rem;
                    position: relative;

                    div {
                        top: 0.5rem;
                        position: absolute;
                        width: 6rem;
                        display: flex;
                        flex-direction: column;
                    }

                    [data-font='en'] {
                        font-family: 'RNSSanzSC-Bold, RNSSanzSC';
                        font-size: 0.48rem;
                    }
                }

                .list-demo {
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    margin: 0 1rem;

                    &:nth-child(4) {
                        width: 6.9rem;
                    }

                    div {
                        margin: 0 !important;
                    }

                    .dna-line {
                        width: 0.03rem;
                        height: 0.86rem;
                        background: #212121;
                        transition-property: transform, opacity;
                        transition-duration: 0.8s, 0.8s;
                        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                        transform: translateY(-1.253rem);
                        opacity: 0;
                    }

                    .dna-line-active {
                        transform: translateY(0);
                        opacity: 1;
                        background: #023BFE;
                    }

                    .round {
                        width: 0.43rem;
                        height: 0.43rem;
                        border: 0.11rem solid #023BFE;
                        border-radius: 50%;
                        transition-property: transform, opacity;
                        transition-duration: 0.8s, 0.8s;
                        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                        opacity: 0;
                    }

                    .round-active {
                        opacity: 1;
                    }

                    .time {
                        font-size: 0.69rem;
                        font-family: 'SmileySans-Oblique', 'SmileySans';
                        font-weight: normal;
                        color: #68656C;
                        line-height: 0.96rem;
                        -webkit-text-stroke: 0.0266rem #68656C;
                        text-stroke: 0.0266rem #68656C;
                        font-style: italic;
                        transition-property: transform, opacity;
                        transition-duration: 0.8s, 0.8s;
                        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                        transform: translateY(-1.33rem);
                        opacity: 0;
                    }

                    .time-active {
                        transform: translateY(0);
                        opacity: 1;
                    }

                    .dna-title {
                        transition-property: transform, opacity;
                        transition-duration: 0.8s, 0.8s;
                        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                        transform: translateY(-1.33rem);
                        opacity: 0;
                        height: 0.85rem;
                        font-size: 0.64rem;
                        font-weight: normal;
                        color: #68656C;
                        line-height: 0.85rem;
                    }

                    .dna-title[data-font='zh'] {
                        font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
                    }

                    .dna-title[data-font='en'] {
                        font-family: 'Helvetica';
                    }

                    .dna-title-active {
                        transform: translateY(0);
                        opacity: 1;
                    }
                }

                .list-demo:nth-of-type(1) {

                    .line,
                    .round,
                    .time,
                    .dna-title {
                        transition-delay: 0.1s, 0.1s;
                    }
                }

                .list-demo:nth-of-type(2) {

                    .line,
                    .round,
                    .time,
                    .dna-title {
                        transition-delay: 0.2s,
                            0.2s;
                    }
                }

                .list-demo:nth-of-type(3) {

                    .line,
                    .round,
                    .time,
                    .dna-title {
                        transition-delay: 0.25s,
                            0.25s;
                    }
                }

                .list-demo:nth-of-type(4) {

                    .line,
                    .round,
                    .time,
                    .dna-title {
                        transition-delay: 0.3s,
                            0.3s;
                    }
                }
            }

            .list2 {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 7.5rem;

                .list2-title {
                    display: flex;
                    flex-direction: column;
                    height: 3.2rem;
                    justify-content: flex-end;
                    font-size: 0.64rem;
                    color: #C927EB;
                    width: 4rem;
                    position: relative;

                    div {
                        position: absolute;
                        width: 6rem;
                        display: flex;
                        flex-direction: column;
                    }

                    [data-font='en'] {
                        font-family: 'RNSSanzSC-Bold, RNSSanzSC';
                        font-size: 0.48rem;
                        padding-bottom: 0.3rem;
                    }
                }

                .list-demo {
                    margin: 0 1rem;
                    display: flex;
                    align-items: center;
                    flex-direction: column-reverse;

                    &:nth-child(4) {
                        width: 6.9rem;
                    }

                    div {
                        margin: 0 !important;
                    }

                    .dna-line {
                        width: 0.03rem;
                        height: 0.86rem;
                        background: #212121;
                        transition-property: transform, opacity;
                        transition-duration: 0.8s, 0.8s;
                        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                        transform: translateY(-1.253rem);
                        opacity: 0;
                    }

                    .dna-line-active {
                        transform: translateY(0);
                        opacity: 1;
                    }

                    .round {
                        width: 0.43rem;
                        height: 0.43rem;
                        border: 0.11rem solid #C927EB;
                        border-radius: 50%;
                        transition-property: transform, opacity;
                        transition-duration: 0.8s, 0.8s;
                        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                        opacity: 0;
                    }

                    .round-active {
                        opacity: 1;
                    }

                    .time {
                        font-size: 0.69rem;
                        font-family: 'SmileySans-Oblique', 'SmileySans';
                        font-weight: normal;
                        color: #68656C;
                        line-height: 0.96rem;
                        -webkit-text-stroke: 0.0266rem #68656C;
                        text-stroke: 0.0266rem #68656C;
                        font-style: italic;
                        transition-property: transform, opacity;
                        transition-duration: 0.8s, 0.8s;
                        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                        transform: translateY(-1.33rem);
                        opacity: 0;
                    }

                    .time-active {
                        transform: translateY(0);
                        opacity: 1;
                    }

                    .dna-title {
                        transition-property: transform, opacity;
                        transition-duration: 0.8s, 0.8s;
                        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                        transform: translateY(-1.33rem);
                        opacity: 0;
                        height: 0.85rem;
                        font-size: 0.64rem;
                        font-weight: normal;
                        color: #68656C;
                        line-height: 0.85rem;
                    }

                    .dna-title[data-font='zh'] {
                        font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
                    }

                    .dna-title[data-font='en'] {
                        font-family: 'Helvetica';
                    }

                    .dna-title-active {
                        transform: translateY(0);
                        opacity: 1;
                    }
                }

                .list-demo:nth-of-type(1) {

                    .line,
                    .round,
                    .time,
                    .dna-title {
                        transition-delay: 0.1s, 0.1s;
                    }
                }

                .list-demo:nth-of-type(2) {

                    .line,
                    .round,
                    .time,
                    .dna-title {
                        transition-delay: 0.2s,
                            0.2s;
                    }
                }

                .list-demo:nth-of-type(3) {

                    .line,
                    .round,
                    .time,
                    .dna-title {
                        transition-delay: 0.25s,
                            0.25s;
                    }
                }

                .list-demo:nth-of-type(4) {

                    .line,
                    .round,
                    .time,
                    .dna-title {
                        transition-delay: 0.3s,
                            0.3s;
                    }
                }
            }
        }
    }

    .group_6 {
        width: 51.2rem;
        position: relative;

        .translation3 {
            width: 4.56rem;
            height: 6rem;
            background-repeat: no-repeat;
            background-size: cover;
            position: absolute;
            background-position: left;
            right: 0;
            top: -0.85rem;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.35s, 0.35s;
            transform: translateX(2.746rem);
            opacity: 0;
        }

        .translation3-active {
            transform: translateX(0);
            opacity: 1;
        }

        .gs5 {
            background: url('@/assets/img/gs5.png') no-repeat;
            background-size: cover;
            width: 13.04rem;
            height: 2.96rem;
            position: absolute;
            top: 6.94rem;
            left: 0.45rem;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.35s, 0.35s;
            transform: translateX(-100%);
            opacity: 0;
        }

        .gs5-active {
            transform: translateX(0);
            opacity: 1;
        }

        .balls3 {
            background: url('@/assets/img/balls3.png') no-repeat;
            background-size: cover;
            width: 2.08rem;
            height: 2.13rem;
            position: absolute;
            top: 10.7rem;
            left: 2.24rem;
            transition-property: transform, opacity;
            transition-duration: 0.3s, 0.3s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0, 0;
            transform: translateY(3.04rem);
            opacity: 0;
        }

        .balls3-active {
            transform: translateY(0);
            opacity: 1;
        }

        .balls4 {
            background: url('@/assets/img/balls4.png') no-repeat;
            background-size: cover;
            width: 0.96rem;
            height: 0.99rem;
            position: absolute;
            top: 26.86rem;
            right: 3.97rem;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.35s, 0.35s;
            transform: translateY(2.2133rem);
            opacity: 0;
        }

        .balls4-active {
            transform: translateY(0);
            opacity: 1;
        }

        .balls5 {
            background: url('@/assets/img/balls5.png') no-repeat;
            background-size: cover;
            width: 1.28rem;
            height: 1.31rem;
            position: absolute;
            top: 31.23rem;
            right: 1.76rem;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.35s, 0.35s;
            transform: translateY(2.24rem);
            opacity: 0;
        }

        .balls5-active {
            transform: translateY(0);
            opacity: 1;
        }

        .bg4 {
            background: url('@/assets/img/bg4.png') no-repeat;
            background-size: 100% 100%;
            width: 8.72rem;
            height: 12.21rem;
            position: absolute;
            top: 3.92rem;
            left: 0;
        }

        .bg5 {
            background: url('@/assets/img/bg5.png') no-repeat;
            background-size: cover;
            width: 10.35rem;
            height: 10.27rem;
            position: absolute;
            top: 12.57rem;
            right: 7.49rem;
        }

        .bg6 {
            background: url('@/assets/img/bg6.png') no-repeat;
            background-size: 100% 100%;
            width: 10.37rem;
            height: 17.81rem;
            position: absolute;
            top: 19.02rem;
            right: 0;
        }

        .translation2 {
            width: 20.4rem;
            height: 19.55rem;
            position: absolute;
            top: 9.9rem;
            right: 0;
            transition-property: transform, opacity;
            transition-duration: 0.8s, 0.8s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.35s, 0.35s;
            transform: translate(11.84rem, 2.213rem);
            opacity: 0;
        }

        .translation2::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            transform: rotateY(180deg);
            background-image: var(--translationImage);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: right;
        }

        .translation2-active {
            opacity: 1;
            transform: translate(0, 0);
        }

        .translation4 {
            width: 17.04rem;
            height: 16.08rem;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: right;
            position: absolute;
            left: 0;
            top: 27.69rem;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.35s, 0.35s;
            transform: translateX(-12.56rem);
            opacity: 0;
        }

        .translation4-active {
            transform: translateX(0);
            opacity: 1;
        }

        .translation6 {
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 5.73rem;
            height: 6.59rem;
            position: absolute;
            bottom: -2rem;
            right: 4.83rem;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.35s, 0.35s;
            transform: translateX(5.12rem);
            opacity: 0;
        }

        .translation6-active {
            transform: translateX(0);
            opacity: 1;
        }




        .tab-content1 {
            position: absolute;
            top: 4.27rem;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.35s, 0.35s;
            transform: translateY(8rem);
            opacity: 0;

            .title {
                margin-top: 1.28rem;
                margin-bottom: 0.53rem;
                font-size: 1.17rem;
                font-weight: bold;
                color: #212121;
                line-height: 1.92rem;
            }

            .title[data-font='zh'] {
                font-family: 'AlibabaPuHuiTi-Bold, AlibabaPuHuiTi';
            }

            .title[data-font='en'] {
                font-family: 'RNSSanzSC-Bold, RNSSanzSC';
            }

            .title:nth-of-type(1) {
                margin-top: 0;
            }

            .logo-demo {
                margin-bottom: 0.85rem;
                width: 12.67rem;
                height: 2.45rem;
                background: rgba(255, 255, 255, 0.25);
                border: 0.05rem solid #FFFFFF;
                backdrop-filter: blur(10px);
                display: flex;
                align-items: center;
                justify-content: center;

                .el-image {
                    max-height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }


                .el-image :deep(.el-image__inner) {
                    vertical-align: center;
                }
            }

            .logo-demo:nth-of-type(2) {
                .el-image {
                    width: 7.28rem;
                    height: 1.47rem;
                }
            }

            .logo-demo:nth-of-type(4) {

                .el-image {
                    width: 7.28rem;
                    height: 1.47rem;
                }
            }

            .logo-demo:nth-of-type(6) {

                .el-image {
                    width: 6.69rem;
                    height: 1.07rem;
                }
            }

            .logo-demo:nth-of-type(7) {

                .el-image {
                    width: 9.23rem;
                    height: 1.6rem;
                }
            }

            .logo-demo:nth-of-type(8) {

                .el-image {
                    width: 9.04rem;
                    height: 1.6rem;
                }
            }

            .logo-demo:nth-of-type(9) {

                .el-image {
                    width: 8.59rem;
                    height: 1.6rem;
                }
            }

            .logo-demo:nth-of-type(10) {

                .el-image {
                    width: 4.77rem;
                    height: 1.71rem;
                }
            }

            .logo-demo:nth-of-type(11) {

                .el-image {
                    width: 6.3rem;
                    height: 0.92rem;
                }
            }

            .co-sponsors {
                margin-top: 1.81rem;

                .co-sponsors-title {
                    width: 100%;
                    height: 1.92rem;
                    font-size: 1.17rem;
                    font-weight: bold;
                    color: #212121;
                    line-height: 1.92rem;
                    text-align: center;
                }

                .co-sponsors-title[data-font='zh'] {
                    font-family: 'AlibabaPuHuiTi-Bold, AlibabaPuHuiTi';
                }

                .co-sponsors-title[data-font='en'] {
                    font-family: 'RNSSanzSC-Bold, RNSSanzSC';
                }

                .co-sponsors-content[data-font='zh'] {
                    margin-top: 0.8rem;
                    width: 100%;
                    display: flex;
                    align-items: flex-start;
                    justify-content: center;

                    .left {
                        width: 15.25rem;
                        // height: 14.72rem;
                        margin-right: 1.49rem;

                        p {
                            width: 100%;
                            height: 100%;
                            font-size: 0.53rem;
                            font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
                            font-weight: normal;
                            color: #68656C;
                            line-height: 0.85rem;
                            letter-spacing: 0.05rem;
                            text-align: right;
                        }
                    }



                    .right {
                        width: 15.25rem;
                        // height: 14.72rem;

                        p {
                            width: 100%;
                            height: 100%;
                            text-align: left;
                            font-size: 0.53rem;
                            font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
                            font-weight: normal;
                            color: #68656C;
                            line-height: 0.85rem;
                            letter-spacing: 0.05rem;
                        }
                    }
                }

                .co-sponsors-content[data-font='en'] {
                    margin-top: 0.91rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .en-box {
                        .en-info {
                            text-align: center;
                            font-size: 0.48rem;
                            font-family: 'Helvetica';
                            color: #68656C;
                            line-height: 0.75rem;
                        }
                    }
                }
            }

        }

        .tab-content1-active {
            transform: translateY(0);
            opacity: 1;
        }

        .line {
            width: 32rem;
            margin-top: 1.01rem;
        }

        .balls6 {
            width: 1.41rem;
            height: 1.39rem;
            position: absolute;
            left: 7.07rem;
            top: 43.18rem;
            background: url('@/assets/img/balls6.png') no-repeat;
            background-size: cover;
            transition-property: transform, opacity;
            transition-duration: 0.86s, 0.86s;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition-delay: 0.35s, 0.35s;
            transform: translateY(4.026rem);
            opacity: 0;
        }

        .balls6-active {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .group_6[data-font='zh'] {
        height: 65.47rem;
    }

    .group_6[data-font='en'] {
        height: 74.59rem;
    }

    .line1 {
        width: 100%;
        height: 0.03rem;
        background: url('@/assets/img/line1.png') no-repeat;
        background-size: 100% 100%;
        transition-property: opacity;
        transition-duration: 0.86s;
        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        transition-delay: 0.35s;
        opacity: 0;
    }

    .line1-active {
        opacity: 1;
    }

    .group-title {
        display: inline-block;
        height: 1.92rem;
        font-size: 1.17rem;
        font-weight: bold;
        color: #212121;
        line-height: 1.92rem;
        position: relative;
        letter-spacing: 0.02rem;
        transition-property: transform, opacity;
        transition-duration: 0.86s, 0.86s;
        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        transition-delay: 0s, 0s;
        transform: translateX(-9.6rem);
        opacity: 0;
    }

    .group-title[data-font='zh'] {
        font-family: 'AlibabaPuHuiTi-Bold, AlibabaPuHuiTi';
    }

    .group-title[data-font='en'] {
        font-family: 'RNSSanzSC-Bold, RNSSanzSC';
    }

    .group-title-active {
        transform: translateX(0);
        opacity: 1;
        padding-right: 1rem;
    }


    .group-title::after {
        content: "";
        width: 0.43rem;
        height: 0.43rem;
        background: url(@/assets/img/icon-title.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 0.3rem;
        bottom: 0.4rem;
    }

    .wrap {
        width: 51.2em;
        height: 100%;
        overflow: auto;
    }
}

.cubic-bezier {
    transition: all 2s cubic-bezier(0.42, 0.00, 0.58, 1.00);
}

.bg-box {
    width: 8rem;
    height: 2.88rem;
    background: #AB6DDA;
    position: absolute;
    transition: all 2s cubic-bezier(0.42, 0.00, 0.58, 1.00);
    z-index: -2;
    opacity: 0;
}

.box1 {
    top: 20rem;
    right: 19.2rem;
}

.box1-active {
    opacity: 1 !important;
}

.box2 {
    top: 13.6rem;
    left: 1.07rem;
}

.box2-active {
    opacity: 1 !important;
}

.box3 {
    top: 17.69rem;
    left: 11.15rem;
}

.box3-active {
    opacity: 1 !important;
}
</style>